<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<title>Proactive</title>
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="../images/favicon.ico">
<link rel="Bookmark" href="images/favicon.ico" type="../image/x-icon"/>

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">

<!-- Add custom CSS here -->
<link href="css/modern-business.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="css/egroupstyle.css" rel="stylesheet">
<!-- bootstrap-datetimepicker css -->
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet"
	media="screen">
<!-- fancybox -->
<link href="fancybox/jquery.fancybox.css?v=2.1.5" rel="stylesheet">


</head>

<body>

	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!-- You'll want to use a responsive image option so this logo looks good on devices - I recommend using something like retina.js (do a quick Google search for it and you'll find it) -->
                <a class="navbar-brand" href="manageCardTemplate">Proactive</a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li class="dropdown"><a href="##"><i class="fa fa-user"></i>&nbsp;Hi,${loginManager.name} <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="logout">登出</a>
                            </li>
                        </ul>
                    </li>
                </ul>  
            </div>

            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="manageCardTemplate">活動管理</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>


	<div class="container tablestyle">
		<div class="row">
			<div class="col-lg-12">
				<br />
				<ol class="breadcrumb">
					<li><a href="manageCardTemplate">卡片樣式管理</a></li>
					<li class="active">活動編輯</li>
				</ol>
				<a href="manageCardTemplate"><button type="button"
						class="btn btn-default btn-sm">
						<span class="glyphicon glyphicon-chevron-left"></span> 回上頁
					</button></a> <br /> <br />

				<div class="bs-docs-section">
					<div class="row">
						<div class="col-lg-12">
							<div class="well bs-component">
								<form class="form-horizontal" id="sendForm" method="post"
									action="modiActivity" enctype="multipart/form-data">
									<input type="hidden" name="id" value="${activity.id}">
									<fieldset>
										<legend>活動編輯</legend>
										<div class="form-group">
											<label for="title" class="col-lg-2 control-label">活動名稱</label>
											<div class="col-lg-8">
												<input type="text" class="form-control" id="title"
													value="${activity.title}" name="title" maxlength="30">
											</div>
										</div>
										<div class="form-group">
											<label for="file" class="col-lg-2 control-label">輪播圖片</label>
											<div class="col-lg-8">
												<a href="#addImageArea" id="addImageBtn">
													<button type="button" class="btn btn-sm btn-success">
														<span class="glyphicon glyphicon-plus"> 圖片</span>
													</button>
												</a>
											</div>
											<div class="clearfix visible-xs-block"></div>
											<label class="col-lg-2 control-label"></label>
											<div class="col-lg-8">
											<c:forEach items="${activityImageList}" var="activityImage"  >
												<div class="showimg" id="showimg">
													<p style="font-size: 20px;">
														<button id="del" type="button" class="close" style="color: black" data-id="${activityImage.id}">×</button>
													</p>
													<img src="${activityImage.imagePath}" alt>
												</div>
												</c:forEach> 
											</div>
										</div>
										<div class="form-group">
											<label for="file" class="col-lg-2 control-label">Banner</label>
											<div class="col-lg-8">
												<label class="input input-file state-error prevpiclabel">
													<div>
														<div class="previmg">
															<img src="${activity.bannerPath}" id="previewBanner">
														</div>
														<div class="button btn btn-success picprevbtn">
															<input type="file" id="banner" name="banner" onchange="this.parentNode.nextSibling.value = this.value">瀏覽檔案上傳</div><input type="text" class="form-control picprevform" readonly=""><span id="msg1"></span></div>
												</label>
											</div>
										</div>
										<div class="form-group">
											<label for="file" class="col-lg-2 control-label">社群分享圖片</label>
											<div class="col-lg-8">
												<label class="input input-file state-error prevpiclabel">
													<div>
														<div class="previmg">
															<img src="${activity.shareImagePath}" id="previewShareImage">
														</div>
														<div class="button btn btn-success picprevbtn">
															<input type="file" id="shareImage" name="shareImage" onchange="this.parentNode.nextSibling.value = this.value">瀏覽檔案上傳</div><input type="text" class="form-control picprevform" readonly=""><span id="msg2"></span></div>
												</label>
											</div>
										</div>
										<div class="form-group">
											<label for="content" class="col-lg-2 control-label">社群分享內容</label>
											<div class="col-lg-8">
												<textarea class="form-control" rows="10" id="shareContent"
													name="shareContent">${activity.shareContent}</textarea>
											</div>
										</div>
										<div class="form-group">
											<label for="content" class="col-lg-2 control-label">活動內容</label>
											<div class="col-lg-8">
												<textarea class="form-control" rows="10" id="content"
													name="content">${activity.content}</textarea>
											</div>
										</div>

										<div class="form-group">
											<div class="col-lg-10 col-lg-offset-2">
												<hr>
												<button type="submit" class="btn btn-warning">送出</button>
											</div>
										</div>
									</fieldset>
								</form>


							</div>
						</div>
					</div>
				</div>
				<!-- bs-docs-section-->


			</div>
			<!-- col-lg-12-->
		</div>
		<!--row -->
	</div>
	<!--container -->


	<div class="container">

		<hr>

		<footer>
		<div class="row">
			<div class="col-lg-12">
				<p>Copyright &copy; Company 2013</p>
			</div>
		</div>
		</footer>

	</div>
	<!-- /.container -->
	<form action="delActivityImage" method="post" id="delForm">
		<input type="hidden" name="id" id="id">
	</form>



	<div id="addImageArea" style="display: none;">
		<form action="addActivityImage" method="post" id="addForm" enctype="multipart/form-data">
		<input type="hidden" name="aid" value="${activity.id}">
			<table class="table table-striped table-bordered middle">
				<caption>新增輪播圖片</caption>
				<tr>
					<td>圖片</td>
					<td><input type="file" name="image"></td>
				</tr>
				<tr>
					<td colspan="2"><button type="submit" id="btn"
							class="btn btn-sm btn-warning">送出</button></td>
				</tr>
			</table>
		</form>
	</div>




	<!-- JavaScript -->
	<script src="js/jquery-1.10.2.js"></script>
	<script src="js/bootstrap.js"></script>
	<script src="js/modern-business.js"></script>
	<!-- fancybox -->
	<script src="fancybox/jquery.fancybox.js?v=2.1.5"></script>

	<!-- validate -->
	<script src="js/jquery.validate.js"></script>
	<script src="js/messages_zh_TW.js"></script>
	<script src="js/additional-methods.js"></script>
	<!-- preview image -->
	<script src="js/previewimg.js"></script>
	<!-- JavaScript -->
	<script type="text/javascript">
		$(function() {
			var oldImage = $("#previewBanner").attr("src");
			var oldImage2 = $("#previewShareImage").attr("src");

			$("#addImageBtn").fancybox();

			$("#sendForm").validate({
				rules : {
					title : "required",
					content : "required",
					banner : {
						filesize : 1048576,
						extension : "jpg|png|jpeg|gif"
					},
					shareImage : {
						extension : "jpg|png|jpeg|gif",
						filesize : 1048576
					},
					shareContent : "required",
				},
				messages : {
					title : "請填寫標題",
					content : "請填寫內容",
					banner : {
						filesize : "圖片大小上限為1MB",
						extension : "檔案格式錯誤，請選擇圖片格式"
					},
					shareImage : {
						extension : "檔案格式錯誤，請選擇圖片格式",
						filesize : "圖片大小上限為1MB"
					},
					shareContent : "請填寫內容",
				},
				errorPlacement: function (error, element) {
					if(element.attr('name') == "banner"){
	    	            $("#msg1").append(error);
	    	    	}
					else if(element.attr('name') == "shareImage"){
	    	            $("#msg2").append(error);
	    	    	}
	    	    	else
	    	    		error.insertBefore(element);
				}
			});

			$("#addForm").validate({
				rules : {
					image : {
						required : true,
						extension : "jpg|png|jpeg|gif",
						filesize : 1048576
					}
				},
				messages : {
					image : {
						required : "請選擇圖片",
						extension : "檔案格式錯誤，請選擇圖片格式",
						filesize : "圖片大小上限為1MB"
					}
				}

			});
			$("#banner").change(function() {
				previewImage(this, $("#previewBanner"), oldImage);

			});
			$("#shareImage").change(function() {
				previewImage(this, $("#previewShareImage"), oldImage2);

			});
			
			$(".close").click(function(){
				var r = confirm("是否要刪除");
				if(r == true){
					var id = $(this).attr("data-id");
					$("#id").val(id);
					$("#delForm").submit(); 
				}
				else{
					return false;
				}
			});

		});
	</script>
</body>

</html>
